<template>
	<view>
		<view class="outermost_box">
			<view class="topContent">
				<view
					class="main_content"
					v-for="(item, index) in dataCardList"
					:key="index"
					@click="particularsCard(item)"
				>
					<view
						class="title"
						style="color: #000; font-size: 32rpx; font-weight: bold"
						><view>姓名：</view> <text>{{ item.patientName }}</text></view
					>
					<view class="title" style="color: #f50000; font-weight: bold"
						><view>可用余额：</view>
						<text>{{ item.availableBalance }}</text></view
					>
					<view class="title"
						><view>身份证号：</view> <text>{{ item.patientIdcode }}</text></view
					>
					<view class="title"
						><view>联系电话：</view>
						<text>{{ item.patientTelephone }}</text></view
					>

					<view
						class="triang"
						v-if="item.defultFlag == 0"
						:style="{ borderTop: item.cardStatus == 0 ? Style : borderStyle }"
						><view
							:class="[item.cardStatus == 0 ? 'bingo' : 'bingoClass']"
						></view
					></view>
				</view>
			</view>
			<view style="margin-top: 50rpx">
				<u-button
					type="primary"
					:disabled="this.userId && this.orgId ? true : false"
					@click="addCard"
					>查找就诊卡</u-button
				>
			</view>
			<view class="bottom_hint">
				<view style="color: orange">温馨提示：</view>
				<!-- <view style="color: #989898"
					>每个账户最多可添加4张卡（默认为本人）</view
				> -->
				<view style="color: #989898"
					>如果卡状态显示为<text
						style="
							display: inline-block;
							width: 10px;
							height: 10px;
							background: red;
						"
					></text
					>则该卡为默认卡</view
				>
			</view>
		</view>
		<view class="safe"></view>
		<u-modal
			v-model="ChooseShow"
			:content="content"
			@confirm="confirm"
		></u-modal>
		<u-modal
			v-model="selectShow"
			:content="selectShowContent"
			@confirm="selectConfirm"
		></u-modal>
	</view>
</template>

<script>
import { findBindCard } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			Style: '30px solid #ff0000',
			ChooseShow: false,
			selectShow: false,
			content: '您的就诊卡已添加5张请删除后重添加',
			selectShowContent: '您未选择就诊医院或未绑定就诊卡',
			dataCardList: [],
		}
	},

	computed: {
		...mapState({
			userId: state => state.userId,
			orgId: state => state.orgId,
		}),
	},
	onShow() {
		if (this.userId && this.orgId) {
			findBindCard({
				userId: this.userId,
				orgId: this.orgId,
				cardType: '1',
			}).then(({ data }) => {
				this.dataCardList = data
			})
		} else {
			this.selectShow = true
		}
	},
	onUnload: function () {
		//页面被卸载时被执行
		uni.switchTab({
			url: '/pages/tabbar_my/index',
		})
	},
	methods: {
		addCard() {
			if (this.userId && this.orgId) {
				if (this.dataCardList.length >= 5) {
					this.ChooseShow = true
				} else {
					this.$router.navigateTo({
						url: '/pages/addPatientCard/addCard',
					})
				}
			} else {
				this.selectShow = true
			}
		},
		particularsCard(i) {
			this.$router.navigateTo({
				url:
					'/pages/addPatientCard/particularsCard?parameter=' +
					JSON.stringify(i),
			})
		},
		selectConfirm() {},
	},
}
</script>

<style lang="scss">
page {
	background: rgba(243, 244, 246, 0.3);
}
.main_content {
	position: relative;
}
.outermost_box {
	padding: 20rpx;
	.main_content {
		background: #fff;
		padding: 30rpx;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
		.title {
			padding: 10rpx;
			color: #ccc;
			view {
				min-width: 150rpx;
				display: inline-block;
			}
		}
	}
}
.triang {
	width: 0;
	height: 0;
	border-top: 30px solid #ff0000;
	border-left: 30px solid transparent;
	position: absolute;
	right: 0;
	top: 0;
}
.bingo {
	width: 24rpx;
	height: 14rpx;
	border: 2px solid pink;
	border-radius: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	background-color: rgba(0, 0, 0, 0);
	transform: rotate(-45deg);
	position: absolute;
	left: -16px;
	top: -26px;
}
.bingoClass {
	width: 24rpx;
	height: 14rpx;
	border: 2px solid #000;
	border-radius: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	background-color: rgba(0, 0, 0, 0);
	transform: rotate(-45deg);
	position: absolute;
	left: -16px;
	top: -26px;
}
.bottom_hint {
	margin-top: 200rpx;
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>